import { RequestTracker } from '../utils/requestTracker';
import { getLastEvent } from '../utils/getLastEvent';
import LongTaskLog = App.LongTaskLog;
import { getSelector } from '../utils';

/**
 * 长任务监控
 * 在js同步执行复杂的计算、大量的DOM操作等工作时，主线程会被占用，其他操作如用户交互、动画渲染等都会被阻塞，
 * PerformanceObserver可以用来监听各种性能事件，包括长任务
 * 当主线程上的任务执行时间超过阈值，默认5000ms，可以认为这是一个长任务，可能会导致页面卡段
 */
export class LongTask {
    private requestTracker: RequestTracker;
    private readonly longTaskDuration: number;
    constructor(requestTracker: RequestTracker, longTaskDuration: number) {
        this.requestTracker = requestTracker;
        this.longTaskDuration = longTaskDuration;
        this.init();
    }

    init() {
        if (PerformanceObserver) {
            const observerLongTask = new PerformanceObserver(list => {
                list.getEntries().forEach(entry => {
                    // 执行时间大于阈值
                    if (entry.duration > this.longTaskDuration) {
                        const lastEvent = getLastEvent();
                        const log: LongTaskLog = {
                            type: 'longTask',
                            startTime: entry.startTime,
                            duration: entry.duration,
                            selector: lastEvent ? getSelector() : '',
                            eventType: lastEvent ? lastEvent.type : ''
                        };
                        this.requestTracker.request(log);
                    }
                })
            });
            observerLongTask.observe({ entryTypes: ['longtask'] });
        }
    }
}
